---
title: Important Modifier
---

import { Tabs, Tab, Callout } from 'nextra-theme-docs';
import { CodeOutput } from '../../../components/CodeOutput';

## Important Modifier

To specify a class to be important, you can wrap it inside the `tw.important()` modifier.

```jsx /tw.important/
import { tw } from 'typewind';

export default function Button() {
  return (
    <button
      className={tw.important(tw.text_red_500).hover(tw.important(tw.text_red_600))}
    >
      Click Me
    </button>
  );
}
```

<Tabs items={['Code Output', 'Result']}>
  <Tab>
    ```tsx
    <button className="!text-red-500 hover:!text-red-600">
      Click Me
    </button>
    ```
  </Tab>
  <Tab>
    <CodeOutput>
      <button className="!text-red-500 hover:!text-red-600">
        Click Me
      </button>
    </CodeOutput>
  </Tab>
</Tabs>
